<template>
  <div>
    <div class="right" :style="{ alignItems: 'center', lineHeight: '32.5px' }">
      <button
        type="primary"
        size="small"
        class="bewdao daochu"
        @click="openDialog('add')"
      >
        <i style="margin-left: 0px" class="el-icon-plus"></i>新增
      </button>
    </div>
    <el-table
      style="width: 100%"
      v-loading="loading"
      :data="groupUseData"
      border
      ref="table"
      :header-cell-style="{
        background: '#f5f5f5',
        'text-align': 'center',
      }"
    >
      <template slot="empty">
        <el-empty description="暂无数据"></el-empty>
      </template>
      <el-table-column
        align="left"
        width="200"
        prop="groupName"
        label="分组名称"
      >
      </el-table-column>
      <el-table-column align="left" prop="groupExplain" label="分组描述">
      </el-table-column>
      <el-table-column align="center" width="200" label="操作">
        <template slot-scope="scope">
          <div class="table-cz">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
            >
              <i
                style="
                  font-size: 14px;
                  color: rgb(64, 149, 229);
                  cursor: pointer;
                "
                class="el-icon-edit"
                @click="edit(scope.row)"
              ></i
            ></el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <i
                style="font-size: 14px; color: red; cursor: pointer"
                class="el-icon-delete"
                @click="del(scope.row)"
              ></i
            ></el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="上移"
              placement="top"
            >
              <i
                style="
                  font-size: 14px;
                  color: rgb(64, 149, 229);
                  cursor: pointer;
                "
                class="el-icon-upload2"
                @click="move('up', scope.row)"
              ></i
            ></el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="下移"
              placement="top"
            >
              <i
                style="
                  font-size: 14px;
                  color: rgb(64, 149, 229);
                  cursor: pointer;
                "
                class="el-icon-download"
                @click="move('down', scope.row)"
              ></i
            ></el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :show-close="true"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :before-close="diaClose"
      append-to-body
      :center="true"
    >
      <!-- 企业下拉 -->
      <el-form
        ref="dialogForm"
        :rules="rules"
        :model="dialogForm"
        label-width="110px"
      >
        <el-form-item label="分组名称" prop="groupName">
          <el-input v-model="dialogForm.groupName"></el-input>
        </el-form-item>
        <el-form-item label="属性说明" prop="groupExplain">
          <el-input
            v-model="dialogForm.groupExplain"
            type="textarea"
            :rows="4"
            resize="none"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 弹窗内容 -->
      <div style="margin-top: 10px; text-align: center">
        <span slot="footer" class="dialog-footer">
          <el-button @click="diaClose">取 消</el-button>
          <el-button type="primary" @click="submit">保 存</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addGroupListApi,
  delGroupListApi,
  downGroupApi,
  editGroupListApi,
  getGroupDataApi,
  upGroupApi
} from '@/api/Device-all/Device-model'
export default {
  data () {
    return {
      dialogForm: {},
      loading: false,
      status: 'add',
      dialogVisible: false,
      rules: {
        groupName: [
          {
            required: true,
            message: '请输入分组名称',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {},
  props: {
    groupUseData: {
      type: Array,
      default: () => []
    },
    classId: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 新增弹窗
    openDialog (val) {
      this.status = val
      this.dialogVisible = true
    },
    // 新增编辑 提交
    async submit () {
      const res =
        this.status === 'add'
          ? await addGroupListApi({ classId: this.classId, ...this.dialogForm })
          : await editGroupListApi(this.dialogForm)
      if (res.code === 200) {
        this.$message({
          type: 'success',
          message: res.message,
          duration: 2000
        })
        this.$emit('groupUpdata')
      } else {
        this.$message({
          type: 'error',
          message: res.message,
          duration: 2000
        })
      }
      this.diaClose()
      console.log(res)
    },
    // 编辑
    async edit (item) {
      this.status = 'edit'
      const res = await getGroupDataApi(item.groupId)
      const data = res.data.entity
      this.dialogForm = {
        groupId: data.groupId,
        groupName: data.groupName,
        groupExplain: data.groupExplain
      }
      this.$forceUpdate()
      this.dialogVisible = true
    },
    // 删除
    async del (item) {
      this.$confirm('此操作将永久删除该属性分组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            const res = await delGroupListApi(item.groupId)
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: res.message,
                duration: 2000
              })
              this.$emit('groupUpdata')
            } else {
              this.$message({
                type: 'error',
                message: res.message,
                duration: 2000
              })
            }
          } catch (e) {
            console.log(e)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 移动
    async move (type, item) {
      this.$confirm('此操作将移动类属性, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res =
            type === 'up'
              ? await upGroupApi({
                groupId: item.groupId
              })
              : await downGroupApi({
                groupId: item.groupId
              })
          console.log(res)
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: res.message,
              duration: 2000
            })
          } else {
            this.$message({
              type: 'error',
              message: res.message,
              duration: 2000
            })
          }
          this.$emit('groupUpdata')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消移动',
            duration: 2000
          })
        })
    },
    diaClose () {
      this.dialogVisible = false
      this.dialogForm = {}
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep textarea {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.table-cz {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 40px;
  i {
    margin-left: 10px;
  }
  .bewdao {
    width: 63px;
    height: 32px;
  }
  .daochu {
    background-color: #1890ff;
    color: #fff;
    border: none;
    border-radius: 3px;
  }
}
</style>
